<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <el-row  v-show="active==0" >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="24">
          <el-form-item label="Led品牌" prop="ledBrand">
            <el-select v-model="formData.ledBrand" placeholder="请选择Led品牌" clearable :style="{width: '100%'}" @change="getLedModelList()">
              <el-option v-for="(item, index) in ledBrandOptions" :key="item.id" :label="item.name"
                         :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Led型号" prop="ledModel">
            <el-select v-model="formData.ledModel" placeholder="请选择Led型号" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in ledModelOptions" :key="item.id" :label="item.name"
                         :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="安装环境" prop="installationEnvironment">
            <el-radio-group v-model="formData.installationEnvironment" size="medium">
              <el-radio v-for="(item, index) in installationEnvironmentOptions" :key="index"
                        :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="配置方式" prop="configType">
            <el-radio-group v-model="formData.configType" size="medium">
              <el-radio v-for="(item, index) in field105Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <div v-show="formData.configType===1">
          <el-col :span="24">
            <el-form-item label="面积" prop="area">
              <el-input v-model="formData.area" placeholder="请输入面积" clearable :style="{width: '100%'}">
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="长宽比例" prop="ratio">
              <el-radio-group v-model="formData.ratio" size="medium">
                <el-radio v-for="(item, index) in ratioOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </div>
        <div v-show="formData.configType===2">
          <el-col :span="24">
            <el-form-item label="长" prop="long">
              <el-input v-model="formData.long" placeholder="请输入长" clearable :style="{width: '100%'}">
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="宽" prop="width">
              <el-input v-model="formData.width" placeholder="请输入宽" clearable :style="{width: '100%'}">
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-form>
    </el-row>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>
<script>
  import {getBrandList} from "../../api/brand";
  import {getLedModelList} from "../../api/ledModel";

  export default {
    components: {},
    props: [],
    data() {
      return {
        active: 0,
        formData: {
          ledBrand: '',
          ledModel: '',
          installationEnvironment: '',
          configType: 0,
          area: '',
          ratio: 1,
          long: '',
          width: '',
        },
        rules: {
          ledBrand: [{
            required: true,
            message: '请选择Led品牌',
            trigger: 'change'
          }],
          ledModel: [{
            required: true,
            message: '请选择Led型号',
            trigger: 'change'
          }],
          installationEnvironment: [{
            required: true,
            message: '安装环境不能为空',
            trigger: 'change'
          }],
          configType: [{
            required: true,
            message: '配置方式不能为空',
            trigger: 'change'
          }],
          area: [],
          ratio: [],
          long: [],
          width: [],
        },
        ledBrandOptions: [],
        ledModelOptions: [],
        installationEnvironmentOptions: [{
          "label": "室内",
          "value": 1
        }, {
          "label": "室外",
          "value": 2
        }],
        field105Options: [{
          "label": "长宽",
          "value": 1
        }, {
          "label": "面积",
          "value": 2
        }],
        ratioOptions: [{
          "label": "16：9",
          "value": 1
        }, {
          "label": "4：3",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getLedBrandList();
    },
    mounted() {},
    methods: {
      getLedBrandList(){
        getBrandList().then(res=>{
          console.log(res);
          this.ledBrandOptions = res.list;
        })
      },
      getLedModelList(){
        this.formData.ledModel='';
        getLedModelList(this.ledBrand).then(res=>{
          console.log(res);
          this.ledModelOptions = res.list;
        })
      },
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }

</script>
<style>
</style>
